<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=750, user-scalable=0, target-densitydpi=device-dpi"/>
    <script src='jquery-3.2.1.min.js'></script>
    <script src='monkey-loading-movieclip-v3.2.min.js'></script>
</head>

<body>
    <div class="demo" id='videoShow'>
    </div>
    <script src='demo.js'></script>
    <script>
    $(function() {

        var Loading = new MK_Loading({
            LDpage: true,
            LDtween: true,
            LDup: function(v) {
                console.log(v);
            },
            LDsuccess: function() {

                //根据设备可视区域高度动态设置序列帧canvas宽高
                var ratio,
                    winW = window.innerWidth,
                    winH = window.innerHeight,
                    ratioDevice = winW / winH,
                    ratioPic = 750 / 1448,
                    videoShow = document.querySelector("#videoShow");

                if (ratioDevice < ratioPic) { //如果屏幕高度超过了1448
                    $("#videoShow").css({
                        width: 750 * winH / 1448,
                        height: winH,
                    })
                }

                showAni = new MK_animateSheet({
                    parents: document.getElementById("videoShow"),
                    type: "img",
                    width: 750,
                    height: 1448,
                    imgList: showImg,
                    step: 1,
                    times: 70,
                    loop: false
                });

                showAni.play();

                showAni.addEventListener('complete', function() { //动画结束 打开KV页面


                });

            }
        });
        //开场动画资源
        showImg = Loading.addImgSheet({
            imgPrefix: "show/",
            imgType: "jpg",
            start: 0001,
            length: 241,
            step: 2,
            mask: '0000'
        });

        Loading.start();
    });
    </script>
</body>

</html>